<template>
	<div class="pigeonhole">
		<div class="pigeonhole-to-bg" :style="{ backgroundImage: 'url(' + (getPigeonhole?.bgImagePath || bgUrl) + ')',
		backgroundRepeat: 'no-repeat' }">
			<h1>文章归档</h1>
		</div>
		<div class="pigeonhole-container">
			<div class="Time">
				<div style="margin-top: 10px;">
					<el-badge :value="isCountSum" class="item" type="primary">
						<el-button size="small" :class="{color:toggle==-1}" @click="getAllList"> 全部</el-button>
					</el-badge>
				</div>
				<div style="margin: 10px 0px;" v-for="(item,index) in times" :key="index">
					<el-badge :value="item.count" class="item" type="primary">
						<el-button size="small" @click="Tag(item,index)" :class="{color:toggle==index}">
							{{`${item.year}年${item.month}日`}}
						</el-button>
					</el-badge>
				</div>
			</div>

			<div class="articles">
				<div>
					<el-card v-for="(item,index) in ArticlesList" :key="index" style="margin: 10px 0;padding: 20px 0px;">
						<div class="content-title">
							<div style="float: left;font-weight: 700;font-size: 20px;">
								<span class="titleH" @click="gotoDateli(item)">{{item.title}}</span>
							</div>
							<div style="float: right;text-align: center;">
								<i class="iconfont icon-yanjing"></i>&nbsp;
								<span>{{item.viewCounts}}</span> <span style="margin-left: 5px;">{{item.commentCounts}}</span>
							</div>
						</div>

						<div class="content-summarize">
							概述 : {{item.summary}}
						</div>

						<div class="content-author">
							作者 : &nbsp;
							<span style="color: gray;">{{item.author}}</span>
						</div>
						<div class="content-tag">
							<div>
								标签 : <span class="tag" v-for="(i,indexs) in item.tags"
									@click="getoCategoryAndTag(i)">{{i.tagName}}</span>
							</div>
							<div>
								<i class="iconfont icon-shijian2"></i>
								<span style="color: gray;"> {{item.createDate}}</span>
							</div>
						</div>
					</el-card>
				</div>
				<!-- 分页 部分-->
				<div style="width: 100%;margin: 0 auto;text-align: center;">
					<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="params.pageNum" :page-sizes="[5,10,15]" :page-size="params.pageSize"
						layout="  prev, pager, next " :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	// 背景画布
	export default {
		data() {
			return {
				times: [],
				params: {
					pageNum: 1,
					pageSize: 8,
					month: null,
					year: null
				},
				ArticlesList: [],
				total: 0,
				toggle: -1,
				bgUrl: "https://blog-chen.oss-cn-shanghai.aliyuncs.com/1a55c797db8d42548da8308b74c67aab.png"
			};
		},
		created() {
			this.getTimes();
			this.getArticlesList()
		},
		mounted() { },
		methods: {
			async getTimes() {
				let res = await this.$api.common.getPigeonholeList()
				if (res.code == 200) {

					this.times = res.data
				}
			},
			// 获取文章列表
			getArticlesList() {
				this.$api.common.getArticlesList(this.params).then(res => {
					if (res.code == 200) {

						this.ArticlesList = res.data
						this.total = res.pageParams.total
					}
				})
			},
			handleSizeChange(pageSize) {
				this.params.pageSize = pageSize
				this.getArticlesList()
			},
			handleCurrentChange(pageNum) {
				this.params.pageNum = pageNum
				this.getArticlesList()
			},
			Tag(item, index) {
				this.toggle = index
				this.params.year = item.year
				this.params.month = item.month
				this.params.pageNum = 1
				this.params.pageSize = 8
				this.getArticlesList()
			},
			getAllList() {
				this.params = Object.assign(this._data.params, this.$options.data().params)
				this.getArticlesList()
				this.toggle = -1
			},
			gotoDateli(item) {
				this.$router.push({
					name: "articleDetail",
					params: {
						id: item.id
					}
				})
			},
			getoCategoryAndTag(i) {
				let list = {
					name: i.tagName,
					id: i.id
				}
				this.$router.push({
					path: '/CategoryAndTag',
					query: {
						list: JSON.stringify(list),
						Is: JSON.stringify("Tag")
					}
				})
			}
		},
		computed: {
			// 通过 mapGetters 辅助函数映射 getters 到组件的计算属性
			...mapGetters(['getPigeonhole']),
			isCountSum() {
				return this.times.reduce((peva, item, index) => {
					return peva += item.count
				}, 0)
			}
		}
	};
</script>

<style lang="less" scoped>
	.pigeonhole {
		position: relative;

		.color {
			background-color: rgba(73, 177, 245, 0.2);
		}

		.pigeonhole-to-bg {
			min-width: 100%;
			height: 500px;
			background-size: 100% 100%;
			background-attachment: fixed;
			background-position-y: -50px;
			position: relative;

			h1 {
				text-align: center;
				position: relative;
				top: 250px;
				font-size: 30px;
				font-weight: 700;
				color: white;
			}
		}

		.pigeonhole-container {
			width: 1250px;
			height: auto;
			margin: 10px auto;
			position: relative;
			display: flex;
			justify-content: space-between;

			::-webkit-scrollbar {
				/*滚动条整体样式*/
				width: 5px;
				/*高宽分别对应横竖滚动条的尺寸*/
				height: 5px;
			}

			::-webkit-scrollbar-thumb {
				/*滚动条里面小方块*/
				border-radius: 5px;
				box-shadow: inset 0 0 5px rgba(73, 177, 245, 0.8);
				background: rgb(73, 177, 245);
			}

			::-webkit-scrollbar-track {
				/*滚动条里面轨道*/
				box-shadow: inset 0 0 5px rgba(73, 177, 245, 0.9);
				border-radius: 5px;
			}

			.Time {
				width: 123px;
				height: 500px;
				background-color: white;
				position: sticky;
				top: 0px;
				left: 0px;
				overflow-y: auto;

				/deep/ .el-button {
					width: 98px !important;
				}
			}

			.articles {
				width: 1130px;
				min-height: 600px;

				h1 {
					text-align: center;
				}

				.content {
					width: 1000px;
					height: auto;
					margin: 10px auto;
					box-sizing: border-box;
				}

				.content-title {
					width: 100%;
					box-sizing: border-box;
					cursor: pointer;
				}

				.titleH:hover {
					color: #95e7b3;
				}


				.content-summarize {
					clear: both;
					position: relative;
					top: 10px;
				}

				.content-author {
					position: relative;
					top: 20px;
					display: flex;
				}

				.content-tag .tag {
					height: 20px;
					line-height: 20px;
					background-color: rgba(103, 194, 58, .1);
					border-radius: 5px;
					border-color: rgba(103, 194, 58, .2);
					padding: 3px;
					color: #67c23a;
					margin: 0 5px;
					cursor: pointer;
				}

				.content-tag {
					position: relative;
					top: 30px;
					display: flex;
					justify-content: space-between;
				}

			}
		}


	}
</style>